<template>
  <view class="container">
    <view class="avatar">
      <!-- 上传组件 -->
      <u-upload
        name="product_img"
        :maxCount="1"
        :fileList="filelist"
        width="100"
        height="100"
        @delete="del"
        @afterRead="read"
      />
    </view>

    <view class="content">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="lights"
        :rules="rules"
        ref="product"
      >
        <!-- 名称 -->
        <u-form-item label="标题" prop="name">
          <u-input
            v-model="lights.name"
            ref="title"
            placeholder="请输入二手车配置名称"
          />
        </u-form-item>

       

        <!-- 提交按钮 -->
        <u-button
          text="添加配置"
          icon="pushpin"
          size="small"
          type="success"
          :customStyle="btnStyle"
          @click="product"
        />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
  
<script>
export default {
  onLoad() {
    this.auth = this.$u.auth.check();
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    setInterval(() => {
      this.$u.count.check();
    }, 15000);
  },
  data() {
    return {
      filelist: [],
      auth: {},
      ligid: 0,
      lights: {
        name: "",
        thumb: "",
      },
      piclist: [],
      rules: {
        name: {
          required: true,
          message: "请填写二手车配置名称",
          trigger: ["blur", "change"],
        },

        createtime_text: {
          required: true,
          message: "创建时间不能为空",
          trigger: ["blur", "change"],
        },
      },
    };
  },

  methods: {
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        this.lights.thumb_text = result.data;
        // 合并对象
        this.filelist = [{ url: result.data }];
        return false;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },

    product() {
      this.$refs.product
        .validate()
        .then(async () => {
          var data = {
            name: this.lights.name,
			adminid:this.auth.id,
            thumb: this.lights.thumb_text,
          };

          let result = await this.$u.api.product.lightssadd(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 2500,
              complete: () => {
                uni.$u.route({
                  type: "reLaunch",
                  url: "/pagesC/product/lights/index",
                });
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },

    async del(e) {
      let data = {
        adminid: this.auth.id,
        ligid: this.ligid,
        url: e.file.url,
      };

      var result = await this.$u.api.product.delimage(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 1000,
          complete: () => {
            if (e.index == 0) {
              this.filelist.splice(e.index, e.index);

              this.filelist = [];
            }
          },
        });
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
          duration: 1000,
        });
      }
    },
  },
};
</script>
  
<style >
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}
</style>
  